<template>
  <view class="page">
    <!-- 搜索条 -->
    <uv-sticky bgColor="#F1F2F3">
      <uni-search-bar
        placeholder="请输入论坛的关键词"
        bgColor="white"
        @confirm="confirm"
        @clear="clear"
        cancelButton="none"
        radius="20"
        v-model="params.keyword"
      />
    </uv-sticky>

    <view class="add" @click="addPost"></view>

    <view class="article">
      <view class="article-item" v-for="(v, k) in list" :key="k" @tap="goToPostInfo(v.id)">
        <view class="article-item-image">
          <image mode="widthFix" :src="v.url"></image>
        </view>
        <view class="article-item-tilte">
          <text>{{ v.title }}</text>
        </view>
        <view class="article-item-tip">
          <!-- <text>作者: {{ v.userName }}</text> -->
          <text>{{ v.createDateTime }}</text>
        </view>
      </view>
      <uv-load-more
        :status="loadStatus"
        loadingIcon="semicircle"
        @loadmore="loadmore"
      ></uv-load-more>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { getPostListAPI } from '@/services/forum'
import { onReachBottom } from '@dcloudio/uni-app'
import { onLoad } from '@dcloudio/uni-app'
import dayjs from 'dayjs'
const params = ref({
  keyword: '',
  pageNo: '1',
  pageSize: '2',
})
const list = ref([])
const total = ref()
const getPostList = async () => {
  const res = await getPostListAPI(params.value)
  res.data.data.forEach((item) => {
    item.createDateTime = dayjs(item.createDateTime).format('YYYY-MM-DD')
  })
  list.value = res.data.data
  total.value = res.data.total
}
onLoad(() => {
  //重置分页参数
  params.value = {
    keyword: '',
    pageNo: '1',
    pageSize: '2',
  }
  getPostList()
  uni.hideLoading()
  uni.showToast({
    icon: 'success',
    title: '发布成功',
  })
})
getPostList()
//页面触底加载更多
const loadStatus = ref('loadmore')

// 页面触底
onReachBottom(() => {
  loadmore()
})
//页面数据不过支撑页面高度去完成触底操作的时候触发
const loadmore = async () => {
  const maxPageNo = Math.ceil(total.value / 2)
  if (params.value.pageNo >= maxPageNo) {
    //数据已经加载完成
    loadStatus.value = 'nomore'
    return
  }
  loadStatus.value = 'loading'
  //未加载所有数据
  params.value.pageNo++ //页数
  const res = await getPostListAPI(params.value) //发送数据
  res.data.data.forEach((item) => {
    item.createDateTime = dayjs(item.createDateTime).format('YYYY-MM-DD')
  })
  list.value.push(...res.data.data)
  if (params.value.pageNo >= maxPageNo) loadStatus.value = 'nomore'
  else loadStatus.value = 'loadmore'
}

//搜索框
//清空搜索栏
const clear = () => {
  params.value = {
    keyword: '',
    pageNo: '1',
    pageSize: '2',
  }
  getPostList()
}
// //确定搜索框内容后触发
const confirm = async () => {
  params.value.pageNo = 1
  params.value.pageSize = 2
  await getPostList()
}

//进入帖子详情页面
const goToPostInfo = (id) => {
  uni.navigateTo({ url: `/pages/forum/info?id=${id}` })
}

const addPost = () => {
  uni.navigateTo({ url: '/pages/forum/addPost' })
}
</script>

<style lang="scss">
.btnDeetail {
  width: 80rpx;
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  background-color: #1a966c;
  border-radius: 50%;
  font-weight: bolder;
  color: #fff;
  font-size: 0rpx;
  position: fixed;
  bottom: 30rpx;
  left: 50%;
  transform: translate(-50%);
}
.add {
  // border: 1px solid;
  width: 40px;
  height: 40px;
  color: #ccc;
  border-radius: 50%;
  background-color: #1a966c;
  position: relative;
  // background-color: #1a966c;
  position: fixed;
  bottom: 30rpx;
  left: 50%;
  transform: translate(-50%);
}

.add::before {
  content: '';
  position: absolute;
  color: white;
  left: 50%;
  top: 50%;
  width: 30px;
  margin-left: -15px;
  margin-top: -2.5px;
  border-top: 5px solid;
}
.add::after {
  content: '';
  position: absolute;
  color: white;
  left: 50%;
  top: 50%;
  height: 30px;
  margin-left: -2.5px;
  margin-top: -15px;
  border-left: 5px solid;
}

.page {
  padding: 25rpx;

  .article {
    .article-item {
      width: 700rpx;
      background: #fff;
      border-radius: 12rpx;
      border-bottom: 1px solid #f0f0f0;
      padding-bottom: 20rpx;
      margin-top: 10rpx;
      margin-bottom: 20rpx;

      &:active {
        background: #f0f0f0;
      }

      .article-item-image {
        width: 700rpx;
        height: 350rpx;
        overflow: hidden;

        image {
          border-radius: 12rpx;
          width: 720rpx;
        }
      }

      .article-item-tilte {
        font-size: 14px;
        color: #000;
        padding: 10rpx 0;
        font-weight: bold;
      }

      .article-item-tip {
        display: flex;
        justify-content: space-between;

        text {
          font-size: 12px;
          color: #777;
        }
      }
    }
  }
}
</style>
